// import { useSelector, useDispatch } from "react-redux";
import { nanoid } from "nanoid";

// import type { RootState } from "./store";

// 引入切片文件中导出的动作创建函数
import { addMsg, setMsg } from "./store/modules/app";
import { addFilm, delFilm, filmFetchData } from "./store/modules/film";
import { bookFetchData } from "./store/modules/book";
import { useAppDispatch, useAppSelector } from "./hooks";

export default function App() {
  // 使用 useSelector 勾出仓库中的某个数据
  // const msg = useSelector((state: RootState) => state.app.msg);
  // const films = useSelector((state: RootState) => state.film.items);
  const msg = useAppSelector((state) => state.app.msg);
  const films = useAppSelector((state) => state.film.items);
  const loading = useAppSelector((state) => state.book.loading);
  const books = useAppSelector((state) => state.book.items);

  // 使用 useDispatch 勾出dispatch
  // const dispatch = useDispatch();
  const dispatch = useAppDispatch();

  return (
    <div>
      <h1>App</h1>
      <button onClick={() => dispatch(bookFetchData())}>
        派发一个 bookFetchData 的异步动作
      </button>

      {loading ? (
        <div>加载中..</div>
      ) : (
        <ul>
          {books.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}

      <p>msg: {msg}</p>

      <button
        onClick={() => dispatch({ type: "app/addMsg", payload: undefined })}
      >
        ADDMSG1
      </button>
      <button onClick={() => dispatch(addMsg())}>ADDMSG2</button>
      <button onClick={() => dispatch(setMsg("张三"))}>张三</button>
      <button onClick={() => dispatch(setMsg("里斯"))}>里斯</button>

      <hr />
      <button onClick={() => dispatch(filmFetchData())}>
        派发 获取电影数据的动作
      </button>
      <button
        onClick={() => dispatch(addFilm({ id: nanoid(), name: "打豆豆" }))}
      >
        新增 打豆豆
      </button>
      <ul>
        {films.map((item) => {
          return (
            <li key={item.id}>
              {item.name}
              <button onClick={() => dispatch(delFilm(item.id))}>删除</button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

// export default connect((state) => ({
//   msg: state.app.msg,
// }))(App);
